Il y a trois façons de programmer en JAVA :
Ensemble d'opérations simples sur les nombres et les chaînes de caractères. On programme les scripts directement dans la page HTML |
|
Ensemble d'opérations simples sur les nombres et les chaînes de caractères avec en
plus des fonctions graphiques. Les Applets se programmes à part mais sont appelés par la page HTML |
les
variables et conversions de type
..................................................................................................................2
les
opérateurs arithmétiques, logiques et
d'incrémentation...................................................................................3
les
instructions if, for, while, continue,
break......................................................................................................4
les objets...........................................................................................................................................................5
Attention les codes qui suivent sont valable pour JavaScript et pas forcement pour des Applets.
Introduction
.............................................................................................................................................
les
variables - déclaration des variables
......................................................................................................
fontes et
couleurs d'affichage:
...................................................................................................................
on ne peut pas dessiner avec JavaScript
les
String - chaîne de caractères
...........................................................................................................................
Date
-(année, mois, jours, heures, minutes et secondes)
........................................................................................
Math
(mathématique)
..........................................................................................................................................
Formulaire
..........................................................................................................................................................
text - (zone texte dans un formulaire)
..................................................... textarea - (zone texte multiligne)
......................................................... Bouton de commande - (Button)
.......................................................................... Case à cocher - (checkbox)
oui ou non ................................................................... Radio - bouton radio
oui ou non .................................................................. Select- choix d'un parmis plusieurs
qui ? ................................................... Password - (Zone texte à entrées cachées - mot de passe)
................................................ Reset - (remise à la valeur initial)
........................................................................ Submit envoi des données
......................................................................
Document
.....................................................................................................................................................
Navigator
...............................................................................................................................................
window
-
fenêtre....................................................................................................................................
alerte
............................................................................................ confirm
............................................................................................ prompt
.........................................................................................................................
Les variables seront déclarées différemment si elle sont employées dans une Applet ou un script. (voir les détails dans le document Applet ou SCRIPT ). Ici nous définirons tous les types de variables.
nombres | type | codé | plage | |
entiers * | byte | 8 bits | de -128 à 127 | |
short | 16 bits | de -32768 à 32767 | ||
entiers | int | 32 bits | de -231 à 231-1 | int nombre_hexa = 0x6AF2 |
entiers * | long | 64 bits | de -263 à 263-1 | |
réels | float | simple précision (32 bits) | de -1,40239846 . 10-45 à 3,4......1038 | float f = 234,67f; |
entiers | double | double précision (64 bits) | de -4,9... . 10-324 à 1,7......10308 |
double var=135.678d; |
booléens | 1 bit | true = 0, false >0 | ||
caractère | char | 16 bits Unicode | un seul caractère | char var1='i'; |
chaîne de caractères | objet String | String var2="oui"; | ||
tableau | type [] nom_va | 1 dimension | caract. ou nombre | int [] variable3; |
* ne convient pas pour JavaScript
conversion de type :
eval () // conversion numérique d'une chaîne - resultat = eval ("125.7")
patseInt () // conversion en un entier d'une chaîne en utilisant une base - resultat_2 = parseInt ("125",8)
parseFloat () // conversion en un réel d'une chaîne - resultat_3 = parseFlot ("125.7")
exemple de convertion d'une chaîne en un objet double :
double = Double.valueOf().doubleValue();
opérateurs arithmétiques |
opérateurs logiques |
opérateurs d'incrémentation |
||||
a=a+b |
+= |
a+=b |
| |
non |
a++ |
postincrémentation R = a* ++E |
a=a-b |
-= |
a-=b |
< |
plus petit que... |
||
*= |
> |
plus grand que |
++a |
préincrémentation R = a* E-- |
||
a=a/b |
/= |
a/=b |
<= |
plus grd ou égal |
||
reste de la division |
%= |
a%=b |
>= |
plus ptt ou égal |
a-- |
post décrément. |
affectation conditionnelle |
?= |
a=(c<d)?e:f a= e si c<d sinon a=f |
!= |
différent |
--a |
prédécrément. |
== |
identique |
|||||
&& |
ET |
|||||
|| |
OU |
Les instructions :
instruction IF
instruction for
instruction while
if (condition==remplie) {
instruction_1 ;
instruction_2 ;
}
else // sinon (facultatif)
{
instruction_3 ;
instruction_4 ;
}
for (x=2;x<=7;x++ ) {
instruction_1 ;
}
for (var in objet)
/* accède séquenciellement à toutes les propriétés d'un objet*/
{
instruction_1 ;
}
//for (;;) => boucle infinie
while (test == false ) {
instruction_1 ;
}
// while (1) => boucle infine
continue // interdit l'exécution
break // sort de la boucle
for (I=0;I<10;I++ )
{
if ( I= =2) // saute l'inst. si I=2
continue;
if (I=5)// sort de la boucle
break;
fonction_1();
}
l'instruction return permet de renvoyer une valeur depuis une fonction
....
function circonference (rayon) // fonction appellée
{
rayon *= 6,28 ;
return rayon// rayon contient la valeur de la circonférence
}
....// dans une autre fonction
X = 17,5;
circonference (X); // appel la fonction circonférence et passe la valeur de X comme rayon
Java est un langage orienté objet ( instructions à points) qui comprend une importante bibliothèque de "classes" (sous-programmes) qui permet d'avoir relativement peu d'instruction à connaître.
Chaque objet possède une ou plusieurs propriété (ou méthode). Pour créer un objet, il faut utiliser l'opérateur New.
par exemple: Une liste de personnes comprend autan d'objets "personne" qu'il y a d'employés:
function personne (nom, prenom,AVS,salaire) {
this.nom=nom
this.prenom=nom
this.AVS=AVS
this.salaire=salaire
}
Cette fonction affecte 4 propriétés à un type d'objet "personne"
secrétaire = new personne ("Anne","Pahud",153465,4230) ceci crée un objet secrétaire du type personne et affecte automatiquement les valeurs des propriétés. secrétaire.nom.value// renvoie la valeur "anne".
secrétaire.nom.value// renvoie la valeur "anne".
exemles 2 : -l'objet math
var = Math.sin( x) // la variable var contient la valeur du sinus de l'angle x
reponse =Math.cos(x) // la variable reponse contient la valeur du cosinus de l'angle x
tang=Math.tan(x) // la variable tang contient la valeur de la tang. de l'angle x
Toutefois, un très gand nombre d'objets existent déjà , qui sont directement disponibles. Voici par exemple la description partielle de l'objet Document
L'objet document donne ou affecte certaine valeur au document :
document.title = "coucouc"
document.fgColor = #000000
document.bgColor = #00ff00
document.write ("cette instruction est valable en JavaScript ou en Java Application")
document.Données.Action.value un formulaire "Données" a été créé , on connaît la valeur du contrôle Action
document.forms[1].Action.value // =la valeur de la propriété du 2ème formulaire du contrôle Action
exemples:
document.write (document.title) // affiche le titre du document
document.write(Math.tan(x )) // affiche la tangeante de l'angle X
Pour d'autres objets, il faut consulter directement leurs constructions et leur méthodes dans le type de langage Java que vous utilisez.
Le script est une suite d'instructions incluses dans le document HTML.
Il n'a pas besoin de compilateur et il est directement interprété par le navigateur (pour des versions pas trop vieille).
Le script comprend au moins 1 fonction ( placée dans le HEAD) et reconnue par les marqueurs
<SCRIPT Language="JavaScript">
.......
</SCRIPT>.
L'appel d'une fonction se fait de la même façon avec les paramètres à passer entre parenthèses.
exemple :
SIZE="2" <HTML><HEAD>
<SCRIPT Langage="JavaScript">
function essais (var_chaine) // fonction essais attend une variable de type chaîne de caractère
{
instruction 1;
...
}
</SCRIPT>
SIZE="2" </HEAD><BODY>
SIZE="2" ....
<SCRIPT Langage="JavaScript">
essais ("ça devrait marcher") // appel la fonction essais et passe le contenu des parenthèses
</SCRIPT>
SIZE="2">...
SIZE="2" </BODY>
Les variables :
Les différents type de variables sont vues dans le document principal ( J'veux les voir).
Dans les scripts, les variables doivent être définie par le mot clé var. Elles sont soit booléennes, soit entières (base 10: nnn) (base 8: 0nnn)(base 16: 0Xnnn), soit réelles soit de type chaîne. Ces dernières peuvent contenir des marqueurs HTML. Plusieurs variables peuvent être placées dans un tableau
exemples
var exemple1= 10 // variable entière
var exemple2= 2,149 // variable réelle
var exemple3= 3 E-7 // variable réelle
var texte1= "ceci est <FONT SIZE=4> SIZE="4" placé dans </FONT>une variable de type chaîne"
var teste1= true // variable booléenne - en minuscule
var tableau1 [0|= 13 // variable tableau - la première valeur =13
String: Les objets String (pas égal à une variable chaîne de caractères) servent à manipuler les chaînes de caractères.
déclaration :
chaine1 = " nom_chaîne " cet objet n'a pas besoin du constructeur new
- méthodes
nom_chaîne .big () // idem <BIG>
nom_chaîne .small () // idem <SMALL>
nom_chaîne .blink () // idem <BLINK>
nom_chaîne .bold () // idem <B>
nom_chaîne .italics () // idem <I>
nom_chaîne .strike() // idem <STRIKE>
barrénom_chaîne .fixed () // idem <TT> - police non proportionnelle
nom_chaîne .sub() // idem <SUB> indice
nom_chaîne .sup() // idem <SUP> exposant
nom_chaîne .fontcolor (" nnnnnn ") ou nom_chaîne .fontcolor ( "crimson ")
nom_chaîne .fontsize ()
nom_chaîne .charAt ( n ) // renvoie le caractère de la position n
nom_chaîne .indexOf ( i ) // première position d'une sous chaîne
nom_chaîne .lastIndexOf ( j ) // dernière position d'une sous chaîne
nom_chaîne .substring( i,j ) // Extrait une sous-chaîne
nom_chaîne .anchor () // désigne un signet
nom_chaîne .link( URL ) // lien hypertexte
nom_chaîne .toLowerCase() // convertit en minuscules
nom_chaîne .toUpperCase() // convertit en majuscules
instructions JavaScript: |
exécution du script |
<Script Language ="JavaScript"> essai1 = " ceci est "; document.write( essai1 .blink()); essai2 = " un essai "; document.write( essai2 .bold()); essai3 = " d'un renvoi "; document.write( essai3 .italics()); essai4 = " à une URL : "; essai5 = " retour à JavaSript "; essai6 =" javaS.htm "; document.write( essai4 .fontcolor(" BB6600 ")); document.write( essai5 .link( essai6 )); </Script> |
Pour choisir une fonte particulière, il faut utiliser les marqueurs HTML
instructions JavaScript: |
exécution du script |
document.write(" ceci
s'affiche sur une ligne"<P> ") document.write(" et cela sur la ligne suivante" ) |
Date: Les objets "date" permettent d'utiliser les variables de temps (seconde, minute, heure, jour, mois, année).
Pour définir un objet date, il existe quatre constructeurs différents:
date1 = new Date () // composé de toutes les variables ( seconde, minute, heure, jour, mois, année)
date2 = new Date (" mois, jour, année, heure:minutes:secondes ") // variables sous forme de chaîne
date3 = new Date ( mois, jour, année ) / / variables sous forme d'entier
date4 = new Date ( mois, jour, année, heures, minutes, secondes ) // variables sous forme d'entier
- méthodes:
nomdate. getDate ()
// jour du mois (entre 1 et 31)
nomdate. getDay () // =jour nomdate. getHours () // =heure nomdate. getMinutes () // =minutes nomdate. getSeconds () // =secondes nomdate. getMonth () // =mois nomdate. getYear () // =année |
nomdate. setDate ()
nomdate. setDay () nomdate. setHours() nomdate. setMinutes () nomdate. setSeconds () nomdate. setMonth () nomdate. setTime () nomdate. setYear () |
nomdate. getTime ()
// =nombre de ms depuis 1.1.1970 0h nomdate. parse ( autredate ) // =nombre de ms depuis 1.1.1970 0h et autredate nomdate. toGMTSting() // converti une date en chaîne selon GMT nomdate. toLocalSting() // converti une date en chaîne selon GMT local nomdate. UTC (a,m,j[,h[,m[,s]]]) // conversion en temps réel nomdate. getTimeZoneoffset () // décalage en mn par rapport à GMT |
instructions JavaScript: |
exécution du script |
<SCRIPT LANGUAGE = "JavaScript"> function affichedate () { aujoudhui = new Date (); an= aujourdui .getYear(); document.write ( "année "+an+"<P>" ); document.write (" jour= "+ aujoudhui .getDay()+"<P>"); document.write ( aujoudhui .getHours()+":"+ aujoudhui .getMinutes()); } </SCRIPT> |
Math: Les objets "math" contient 8 propriétés (constantes) et 17 méthodes
P our utiliser une des constantes , utilisez la syntaxe suivante :
Math. propriété
P our utiliser une des méthodes , utilisez la syntaxe suivante :
Math. méthode ()
instructions pour les constantes JavaScript: |
exécution du script |
<SCRIPT LANGUAGE = "JavaScript"> with (Math) { document.write( " E = ",E) document.write( " <P>LN10 = ",LN10) document.write( " <P>LN2 = ",LN2) document.write( " <P>LOG2E = ",LOG2E) document.write( " <P>LOG10E= ",LOG10E) document.write( " <P>PI = ",PI) document.write( " <P>SQRT1_2 = ",SQRT1_2) document.write( " <P>SQRT2 = ",SQRT2) } |
|
<FORM> calcul de la valeur aboslue: <input Type="button" value="abs" ONCLICK ="form.repon1.value= Math.abs (form.repon.value)"><P> calcul de l'arcosinus: <input Type="button" value="acos" ONCLICK ="form.repon1.value= Math.acos (form.repon.value)"><P> calcul de l'arcsinus : <input Type="button" value="asin" ONCLICK ="form.repon1.value= Math.asin (form.repon.value)"><P> calcul de l'arctangente: <input Type="button" value="atan" ONCLICK ="form.repon1.value= Math.atan (form.repon.value)"><P> calcul du cosinus: <input Type="button" value="cos" ONCLICK ="form.repon1.value= Math.cos (form.repon.value)"><P> calcul du sinus: <input Type="button" value="sin" ONCLICK ="form.repon1.value= Math.sin (form.repon.value)"><P> valeur : <input Type="text" value="repon" size = 15"> <P> réponse: <input Type="text" value="repon1" size = 15"> <P> calcul de la tangente: <input Type="button" value="tan" ONCLICK ="form.repon1.value= Math.tan (form.repon.value)"><P> calcul de l'entier < =: <input Type="button" value="ceil" ONCLICK ="form.repon1.value= Math.ceil (form.repon.value)"><P> calcul de l'entier inf <= <input Type="button" value="floor" ONCLICK ="form.repon1.value= Math.floor (form.repon.value)"><P> calcul de l'exponentielle <input Type="button" value="exp" ONCLICK ="form.repon1.value= Math.exp (form.repon.value)"><P> calcul du log. (naturel ou népérien) <input Type="button" value="log" ONCLICK ="form.repon1.value= Math.log (form.repon.value)"><P> affiche le plus grand <input Type="button" value="max" ONCLICK ="form.repon1.value= Math.max (form.repon.value, 107)"><P> affiche le plus petit <input Type="button" value="min" ONCLICK ="form.repon1.value= Math.min (form.repon.value, 107)"><P> mise à la puissance <input Type="button" value="pow" ONCLICK ="form.repon1.value= Math.pow (form.repon.value, 107)"><P> nombre aléatoire <input Type="button" value="ranfom" ONCLICK ="form.repon1.value= Math.random ()"><P> calcul l'arrondi <input Type="button" value="round" ONCLICK ="form.repon1.value= Math.round (form.repon.value)"><P> calcul la racine carrée <input Type="button" value="sqrt" ONCLICK ="form.repon1.value= Math.sqrt (form.repon.value)"><P> exemple :4ème racine <input Type="button" value="4eme" ONCLICK ="form.repon1.value= Math.pow (Math.E, (Math.log(form.repon.value))/4)"><P> évidemment ... |
formulaire: Les objets "formulaire" servent à afficher des zones de contrôles ( zones textes, boutons radio, cases à cocher , etc..)
- syntaxe : <FORM name=" nom_formulaire " TAGET=" dans_cette_fenêtre " ACTION = prog_a_executer METHOD = (GET ou POST) ENCTYPE = " type_d'encodage " onSubmit =" nom_de_la_fonction ">
- propriétés:
nom_formulaire .ACTION / / correspond au paramétre ACTION
nom_formulaire .encoding / / correspond au paramétre ENCTYPE
nom_formulaire .method / / tcorrespond au paramétre METHODE
nom_formulaire .taget / / correspond au paramétre TARGET
nom_formulaire .elements[] / / tait référence aux contrôles du forulaire
nom_formulaire .length / / tnombre de contrôles dans le formulaire
nom_formulaire .index / / numéro du formulaire à atteindre
instructions JavaScript: |
exécution du script |
<FORM NAME = " testform
"> <input type="text" name=" bout4 " size= 30 > <BR><P> <input type="button" name=" 24 " value=" clic 1 " ONCLICK = " fform1 (testform)"> <BR><P> </FORM> /*et le script suivant :*/ function fform1 ( form ) { form. bout4 .value = "il y a "+ document .testform .lenght+ "controles" }
|
TEXT: Les objets text permettent de définir des zones de texte dans les formulaires.
- syntaxe :
<INPUT type ="text" Name = " nom_text " value=" text_par_défaut " [Size = nombre_de_ligne_visible ]
[onBlur = " traitement "] appel d'une fonction "traitement" lors de la perte du focus par l'objet select
[onChange =" traitement2 "] appel d'une fonction "traitement2" lors d'un chagement de valeur de l'objet select
[onfocus = " traitement3 "] appel d'une fonction "traitement3" lors de la prise du focus par l'objet select
[onSelect = " traitement4 "] appel d'une fonction "traitement34 lors de la sélection du texte
Les termes entre paranthèses crochets sont facultatifs
- propriétés de l'objet text :
nom_text .name// pour connaître le nom de l'objet
ou NomFormulaire .elements[ N ].name // repéré ici par sa position (-1) dans le formulaire
nom_text .value/ /contenu de l'objet
nom_text .defaultValue// = paramètre value de l'objet
instructions JavaScript: |
exécution du script |
<FORM NAME= essaitext > j'aime JavaScript <P> <INPUT TYPE="text" Name=" javatext " VALUE=" oui " SIZE= 30 onFocus="this.select()" onChange="this.value=this.value.toUpperCase()" onBlur=" voirt ( this.form )"> </FORM> <P><Script Language ="JavaScript"> function voirt (form) { document. essaitext . javatext .value=" ce test fonctionne , "+document. essaitext . javatext .value; } </script> |
|
TEXTAREA: Les objets textarea permettent de définir des zones de texte multiligne dans les formulaires.
- syntaxe :
<TEXTAREA name = " nom_texta " ROWS=" nlignes " COLS=" ncolonnes "
[onBlur = " traitement "] appel d'une fonction "traitement" lors de la perte du focus par l'objet select
[onChange =" traitement2 "] appel d'une fonction "traitement2" lors d'un chagement de valeur de l'objet select
[onfocus = " traitement3 "] appel d'une fonction "traitement3" lors de la prise du focus par l'objet select
[onSelect = " traitement4 "] appel d'une fonction "traitement34 lors de la sélection du texte
text par défaut affiché dans l'objet
</TEXTAREA>
Les termes entre paranthèses crochets sont facultatifs
- propriétés de l'objet text :
nom_texta .name// pour connaître le nom de l'objet
ou NomFormulaire .elements[ N ].name // repéré ici par sa position (-1) dans le formulaire
nom_texta .value/ /contenu de l'objet
Button: Les objet boutons sont identiques à ceux placés dans les formulaires HTML (ne sont pas inscrit entre les marqueur des Script.
- syntaxe : <input type="button" name=" nom " value=" valeur_initiale " [ONCLICK = " nom_de_la_fonction "]>
- propriétés:
document. NomFormulaire . Nomboutons .name // pour connaître le nom du bouton
document. NomFormulaire .elements[ N ].name // repéré ici par sa position (-1) dans le formulaire
document. NomFormulaire . Nomboutons .value // pour connaître son contenu
document. NomFormulaire .elements[].value
instructions JavaScript: |
exécution du script |
<FORM NAME = " plus_un
") <input type="text" name=" bout1 " size= 10 > <input type="button" name=" calcul " value=" execute " ONCLICK = " add1 (this.form)"> </FORM> /*et le script suivant :*/ function add1 ( form ) { form. bout1 .value = form. bout1 .value +1} |
instructions JavaScript: |
exécution du script |
<FORM NAME = " bout2
") <input type="text" name=" bout2 " size= 10 > <input type="button" name=" calcul " value=" execute " ONCLICK = " add2 (this.form)"> </FORM> /*et le script suivant :*/ function add2 ( form ) {
} |
checkbox: Les objet "case à cocher sont identiques à ceux placés dans les formulaires HTML (ne sont pas inscrit entre les marqueur des Script).
- syntaxe : <input type="checkbox" name=" nom " value=" valeur_initiale " [CHECKED] [ONCLICK = " nom_de_la_fonction "]>
Checked (n'est pas obligatoire) coche la case par défaut
- propriétés:
document. NomFormulaire . Nombouton .checked / / true si coché
document. NomFormulaire . Nombouton .defaultchecked // rtrue si coché par défaut
document. NomFormulaire . Nombouton .name // pour connaître son nom
document. NomFormulaire . Nombouton .value // pour connaître sa valeur
document. NomFormulaire .elements[ N ].checked // repéré ici par sa position (-1) dans le formulaire
instructions JavaScript: |
exécution du script |
<FORM NAME = " check
") <input type="text" name=" bout3 " size=10> <input type="checkbox" name=" doubl " value="10" ONCLICK = " fonction1 (this.form) "> <input type="checkbox" name=" textl " value="c'est juste" ONCLICK = " fonction2 (this.form) "> <input type="checkbox" name=" checkl " value="125" ONCLICK = " fonction3 (this.form) "> </FORM> /*et le script suivant :*/ function fonction1 ( form ) { form. bout3 .value = document.check. doubl .value *2} function fonction2 ( form ) { form. bout3 .value = document.check. text .value } function fonction3 ( form ) { form. bout3 .value = " coucou..." |
Select: Les objets select permettent de faire un ou plusieurs choix parmis une liste déroulante.
- syntaxe :
<SELECT Name = nom_select [Size = nombre_de_ligne_visible ] [MULTIPLE]>
multiple autorise plusieurs sélections
[onBlur = " traitement "] appel d'une fonction "traitement" lors de la perte du focus par l'objet select
[onChange =" traitement2 "] appel d'une fonction "traitement2" lors d'un chagement de valeur de l'objet select
[onfocus = " traitement3 "] appel d'une fonction "traitement3" lors de la prise du focus par l'objet select
<option value=" valeur_retournée " [selected]> text1 valeur_retournée -> valeur renvoyée lors de la sélection de text1
<option value=" valeur_retournée2 " [selected]> text2 selected -> selectionne déjà un choix
</SELECT>
Les termes entre paranthèses crochets sont facultatifs
- propriétés de l'objet select :
nom_select .name // pour connaître le nom du bouton
ou NomFormulaire .elements[ N ].name // repéré ici par sa position (-1) dans le formulaire
nom_select .lenght // pour connaître le nombre d'option de l'objet
nom_select .options // tableau contenant les options de l'objet
nom_select .selectedIndex // numéro de l'option sélectionnée (de la première si sélection multiple)
- propriétés des options:
valeur_retournée .options[i].name // pour connaître le nom du bouton
ou NomFormulaire .elements[i].options[i].name
valeur_retournée .options[i].index // renvoie le numéro de l'option sélectionnée
valeur_retournée .options[i].lenght // renvoie le nombre d'options
valeur_retournée .options[i].defaultSelected // sélectionne par défaut
valeur_retournée .options[i].selected // sélectionne une option
valeur_retournée .options[i].selectedIndex // numéro de l'option sélectionnée
valeur_retournée .options[i].text // renvoie la valeur du text affiché dans le marqueur <option>
valeur_retournée .options[i].value // renvoie la valeur du paramètreVALUE
instructions JavaScript: |
exécution du script |
<FORM name="formchoix"
> <Textarea name=" rep" ROWS =4 COLS = 30> </TExtarea> <p> <input type="button" name=" ok " onclick= voirchoix (this.form)> <select name=" choix " size= 3 > <option > oui <option value=" nein " selected> non <option value=" da "> ja <option value=" blut "> boof < /select> </FORM> <Script Language ="JavaScript"> function voirchoix (form) { var nmbr= document. formchoix .choix.length var i= document. formchoix .choix.selectedIndex var val = document. formchoix .choix.options[ i ].value var nomop= document. formchoix .choix.options[ i ].text document. formchoix .rep.value= "il y a "+ nmbr + " choix possibles \n vous avez choisi l'option "+ i + "\n vous avez choisi l'option de valeur: "+ val + "\n vous avez choisi l'option : "+ nomop; } </script> |
Password: L'objet "Password" est un champ text dans lequel sa valeur est remplacée par des astérisques.
syntaxe : <INPUT TYPE ="password" NAME=" nom_champ " VALUE=" Valeur_initiale " >
- propriétés:
nom_champ. défaultValue // =Value initiale
nom_champ. name // renvoie son nom
nom_champ. value // renvoie la valeur contenue dans le champ
ou
Nom_formulaire. elements[ i ].Propriété
- Méthodes:
nom_champ. blur () // enlève le focus de l'objet ("dessélectionne")
nom_champ. focus () // donne le focus
nom_champ. select () // selectionne le contenu du champ
ou
Nom_formulaire .elements[ i ].Propriété.Méthode ()
exemples d'instructions pour les propriétés et méthodes |
exécution du script |
<FORM> <INPUT TYPE ="button" NAME=" champ1 " VALUE=" OK " onClick = " voir_juste (this.form)" > <INPUT TYPE ="password" NAME=" champ2 " VALUE=" TELEM " SIZE= 10 > <INPUT TYPE ="text" NAME=" champ3 " VALUE="reponse " SIZE=15 > </FORM> <SCRIPT LANGUAGE = "JavaScript"> function voir_juste(form) { var reponse if (form.champ2.value==" POIRE")>
else
form.champ3.value= reponse; } |
radio: Les objet boutons sont identiques à ceux placés dans les formulaires HTML (ne sont pas inscrit entre les marqueur des Script.
- syntaxe : <input type="radio" name=" nom " value=" valeur_initiale " [CHECKED] [ONCLICK = " nom_de_la_fonction "]> Les termes entre paranthèses crochets sont facultatifs
- propriétés:
document. NomFormulaire . Nomboutons [i].name // pour connaître le nom du bouton num. i du groupe
ou document. NomFormulaire .elements[N].name // repéré ici par sa position (-1) dans le formulaire
document. NomFormulaire . Nomboutons [i].value // pour connaître son contenu
document. NomFormulaire . Nomboutons [i].checked // renvoie l'état du bouton
document. NomFormulaire . Nomboutons [i].defaultChecked // renvoie l'état du bouton par défaut
document. NomFormulaire . Nomboutons [i].length // renvoie le nombre de bouton radio
instructions JavaScript: |
exécution du script |
<FORM NAME = " radi "> <input type="text" name=" but t" value = " Nous sommes le 32 juin" size=30 ><P> <input type="radio" name=" test " value=" radi1 " CHECKED ONCLICK = " voir (this.form)"> oui<P> <input type="radio" name=" test " value=" radi2" ONCLICK = " voir (this.form) ">non<P> </ FORM > <SCRIPT LANGUAGE = "JavaScript"> function voir (form) { varidate = new Date () if (document. radi1 .test[0].checked)
else
} </script> |
Reset: Les objets Reset permettent de réafecter les valeurs par défaut des différents contrôles ( boutons).
- syntaxe : <input type="reset" name=" nom " value=" valeur_initiale " [ONCLICK = " nom_de_la_fonction "]> Les termes entre paranthèses crochets sont facultatifs
- propriétés:
nom .name // pour connaître le nom du bouton
ou NomFormulaire .elements[N].name // repéré ici par sa position (-1) dans le formulaire
nom .value // pour connaître sa valeur
ou NomFormulaire .elements[N].value // repéré ici par sa position (-1) dans le formulaire
instructions JavaScript: |
exécution du script |
<FORM NAME = " rese
"> <input type="text" name=" butt " value = " Modifiez les valeurs initiales " size=30 ><P> <input type="radio" name=" test " value=" radi1 " CHECKED > oui<P> <input type="radio" name=" test " value=" radi2 " > non<P> <input type="radio" name=" valeurs initiales " value=" reset1 " ><P> </FORM>
|
Submit: Les objets submit servent à envoyer des données contenues dans des objets d'un formulaire.
déclaration :
< input type="submit" name=" nom_sub " value=" texte_affiché " [ onClick=" traitement " ] >
- propriétés :
nom_sub.name // nom du bouton
ou nom_formulaire .elements[i].name
nom_sub .value // valeur du bouton
note: le formulaire doit contenir l'instriction ACTION="mailto_ou_prog_de_traitement:adresse"
ainsi que METHOD=POST
Document: Les objets "document" permettent d'utiliser les propriétés du document courant
Pour accéder à un objet document, il faut utiliser l'une des deux méthodes suivantes :
document. propriété // propriété = alinkColor, anchirs, bgColor,cookies, fgColor, forms, lastModified, linkColor, links, location, referrer, title, vlink
document.méthode( paramètre ) // méthode =clear, close, open, write, writeln
instructions JavaScript: |
exécution du script |
<FORM> <input Type="bouton" value=" fond vert " ONCLIK=" changefond (this.form)"> <input Type="bouton" value=" fond jaune " ONCLIK=" changefond (this.form)"> <SCRIPT LANGUAGE = "JavaScript"> function changefond () { if (form. fondvert ==true)
else
}
|
Navigator: L'objet "navigateur" renvoie des informations sur le type et la version du navigateur utilisé. Ce qui permet des affichages , des codes ou des liens différents selon le navigateur installé sur une machine.
instructions pour les propriété |
exécution du script |
<SCRIPT LANGUAGE = "JavaScript"> document.write( navigator. appCodeName ,"<P>"); document.write( navigator. appName ,"<P>"); document.write( navigator. appVersion ,"<P>"); document.write( navigator. userAgent ,"<P>"); </SCRIPT> |
window: Les objets window sont au niveau le plus haut.
mode d'accès aux propriétés:
window.Propriété // fenêtre courante
self.Propriété // fenêtre courante
top.Propriété // fenêtre hiérachiquement supérieur (si plusieurs sont ouvertes)
parent.Propriété // document dans lequel les cadres (FRAMES) sont définis
variable.Propriété // nom d'une variable utilisée pour définir une nouvelle fenêtre
- propriétés de l'objet window :
.defaultStatus// message affiché par défaut dans la bare d'état
.frames[]// tableau des cadres définis dans le document
.length/ nombre de cadres dans la fenêtre parent
.name// nom de la fenêtre défini par open ("","nom_fenêtre","")
. parent// nom du document dans lequel les cadres sont définis
.self// nom de la fenêtre courante
. status// message affiché dans la bare d'état
. top// nom de la fenêtre hiérarchiquemet supérieur si plusieurs sont ouverte
. window// nom de la fenêtre courante
- méthodes de l'objet window :
alert()// boîte de dialogue (texte+OK) - voir alert
confirme()// boîte de dialogue (texte+OK+ ANNULER)- voir confirme
prompt()// boîte de dialogue (texte à entrer +OK+ ANNULER) - voir prompt
alert()// boîte de dialogue (texte+OK) - voir boîte de dialogue
setTimeout()// Exécution d'une fonction après un délais défini
clearTimeout()// annule le délais
instructions JavaScript: |
exécution du script |
<form> <input type="button" name=" alerte " value=" ouvrir " onClick=" ouvre ()"> </form> <script Language= javaScript>
function ouvre () { nouvel=window.open(" sons/testsubmit "," testsubmit ","status= yes , toolbar= yes , location= yes , directories= yes , menubar= no , scrollbars= no , resizable= yes , width= 40 , height= 40 "); } </script> script dans la document testsumbit : </HEAD><BODY onLoad=" compte ()"> <Script language="JavaScript"> function compte() { fin =""; clearTimeout( fin ); window.status=" dans moins de 5s je me ferme. "; fin =setTimeout("window.close()", 5000 ); } </script> </BODY></HTML> |
ALERT : La méthode alert affiche une boîte de dialogue contenant un text et un bouton "OK"
<form>
<input type="button" name=" alerte " value=" voir s'il a y le feu " onClick="alert(' 'Y a pas le feu ')">
</form>
confirm: La méthode confirm affiche une boîte de dialogue contenant un text, un bouton "OK" et un bouton "Annuler"
instructions JavaScript: |
exécution du script |
<form> <input type="button" name=" alerte " value=" femer cette fenêtre " onClick=" sur ()"> </form> <script Language= javaScript> function sur () { if (confirm(' merci de confirmer avant de patir ')) window.close() } </script> |
prompt: La méthode prompt affiche une boîte de dialogue contenant un champ text, un bouton "OK" et un bouton "Annuler"
instructions JavaScript: |
exécution du script |
<form name="pt"> <input type="button" name=" val " value=" démo " onClick="prom(this .form)" ><P> <input type="text" name=" val3 " value=" controle " size= 30> </form> <script Language= javaScript> function prom(form) { retourprompt =prompt(" entrez la valeur 3 ",4); if ( retourprompt ==null)
else
} </script> |